<template>
  <div class="header">
    <img class="logo-dark" src="@/assets/images/logo-dark.png" alt="" />
    <div class="nav">
      <router-link to="/admin-index">
        <Icon type="md-home" class="icon" /><span>首页</span>
      </router-link>
    </div>
    <div class="nav" @click="showAdminList">
      <Icon type="md-apps" class="icon" /><span>后台管理</span>
    </div>
    
    <div class="right">
      <div class="input">
        <input type="text" class="ivu-select-input" placeholder="搜索..." />
      </div>
      <div>
        <Icon type="ios-qr-scanner" class="scanner" />
      </div>
      <div>
        <img :src="avatarUrl" class="blob" />
      </div>
      <div>
        <Dropdown class="dropdown">
          <a> 管理员 </a>
          <template #list>
            <DropdownMenu>
              <DropdownItem>
                <Icon type="ios-contact-outline" />&nbsp;&nbsp;
                <a href="#" class="individual">个人中心</a>
              </DropdownItem>
              <DropdownItem @click="loginout">
                <Icon type="ios-log-out" />&nbsp;&nbsp;
                <a href="#" class="exit">退出登录</a>
              </DropdownItem>
            </DropdownMenu>
          </template>
        </Dropdown>
      </div>

      <div>
        <Dropdown class="dropdown">
          <img src="@/assets/images/中英.png" class="language" />

          <template #list>
            <DropdownMenu>
              <DropdownItem>
                <a href="#" class="individual">简体中文</a>
              </DropdownItem>

              <DropdownItem>
                <a href="#" class="exit">English</a>
              </DropdownItem>
            </DropdownMenu>
          </template>
        </Dropdown>
      </div>

      <div>
        <Icon type="md-more" class="more" size="18" />
      </div>
    </div>
  </div>
</template>
<script>
import { loginout as out } from "@/api/admin";
import defaultUrl from "@/assets/images/blob.png"
export default {
  name: "TopBar",
  computed:{
    avatarUrl(){
      let url = this.$store.state.Admin.adminInfo.avatarUrl
      if(url){
        return url
      }else{
        return defaultUrl
      }
    }
  },
  methods: {
    showAdminList() {
      this.$store.commit("addRouterMenuItem",{
        name:"用户列表",
        path:"/admin-index/adminlist"
      })
      this.$router.push("/admin-index/adminlist");
    },
    loginout(){
      out().then(res=>{
        if(res.data.errCode == 0){
          localStorage.token = ""
          localStorage.token_outtime = ""
          this.$router.push("/") 
        }else{
          this.$Notice.error("未知错误,退出失败")
        }
      })
    }
  },
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 48px;
  background-image: linear-gradient(
    to right,
    #1d43ac,
    #1e55be,
    #206fd8,
    #207de7,
    #1f88f3,
    #1e91fd
  );
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  display: flex;
  align-items: center;
}

.logo-dark {
  width: 154px;

  height: 39px;

  margin-left: 19px;
}

.nav {
  margin: 0 28px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.icon {
  width: 19px;
  height: 19px;
  margin-left: 35px;
  margin: 0 5px;
}
a {
  color: #fff;
}

.input {
  width: 140px;
}

.scanner {
  font-size: 20px;
  font-weight: 400;
  color: #fff;
  margin-left: 15px;
}

.blob {
  width: 24px;
  height: 24px;
  margin-left: 21px;
  border-radius: 50%;
  margin-top: 5px;
}

.dropdown {
  margin-left: 11px;
}

.individual,
.exit {
  color: #000;
}

.more {
  color: #fff;
}

.language {
  width: 24px;
  height: 24px;
  margin: 0 17px;
}
.right {
  position: absolute;
  right: 20px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

</style>